<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;padding: 0;
			}
			#box{
				width: 890px;
				height: 266px;
				border: 1px solid #DDDDDD;
				border-top: 2px solid #c00;
				margin: 50px auto 0;
				overflow: hidden;
			}
			#shang li{
				list-style: none;
				float: left;
				width: 177px;
				height: 37px;
				text-align: center;
				line-height: 37px;
				border-left: 1px solid #DDDDDD;
				border-bottom: 1px solid #DDDDDD;
				background: #f5f5f5;
				font-weight: bold;
				color: #333;
				cursor: pointer;
				font-size: 14px;
			}
			#shang li:first-child{
				border-left: 
				none;width: 178px;
			}
			#shang li.curr{
				border-bottom: none;
				color: #FF0000;
				background: none;
			}
			
			
			#xia dl{
				width: 130px;
				padding: 0 22px;
				font-size: 12px;
				line-height: 15px;
				float: left;
			}
			#xia dd a{
				text-decoration: none;
				color: #333;
			}
			#xia dd span{
				 color: #c00;
				 font-weight: bold;
			}
			#xia dl dt img{
				margin-top: 15px;
			}
			#xia dl dd{padding-top: 10px;}
			#xia div{display: none;}
			#xia div.curr{display: block;}
			#xia{clear: both;}
		</style>
	</head>
	<body>
		<div id="box">
			<div id="shang">
				<ul>
					<li>疯狂抢购</li>
					<li>热卖商品</li>
					<li>热评商品</li>
					<li>新品上架</li>
					<li>猜您喜欢</li>
				</ul>
			</div>
			<div id="xia">
				<div >
					<dl>
						<dt><a href="#"><img src="img/img0.jpg"/></a></dt>
						<dd><a href="#">德利诗儿DLSER 2012 真皮时尚凉鞋</a></dd>
						<dd>价格:<span>&yen99.99</span></dd>
					</dl>
					<dl>
						<dt><a href="#"><img src="img/img1.jpg"/></a></dt>
						<dd><a href="#">德利诗儿DLSER 2012 真皮时尚凉鞋</a></dd>
						<dd>价格:<span>&yen99.99</span></dd>
					</dl>
					<dl>
						<dt><a href="#"><img src="img/img2.jpg"/></a></dt>
						<dd><a href="#">德利诗儿DLSER 2012 真皮时尚凉鞋</a></dd>
						<dd>价格:<span>&yen99.99</span></dd>
					</dl>
					<dl>
						<dt><a href="#"><img src="img/img3.jpg"/></a></dt>
						<dd><a href="#">德利诗儿DLSER 2012 真皮时尚凉鞋</a></dd>
						<dd>价格:<span>&yen99.99</span></dd>
					</dl>
					<dl>
						<dt><a href="#"><img src="img/img4.jpg"/></a></dt>
						<dd><a href="#">德利诗儿DLSER 2012 真皮时尚凉鞋</a></dd>
						<dd>价格:<span>&yen99.99</span></dd>
					</dl>
				</div>
				<div >
					<dl>
						<dt><a href="#"><img src="img/img5.jpg"/></a></dt>
						<dd><a href="#">德利诗儿DLSER 2012 真皮时尚凉鞋</a></dd>
						<dd>价格:<span>&yen99.99</span></dd>
					</dl>
					<dl>
						<dt><a href="#"><img src="img/img6.jpg"/></a></dt>
						<dd><a href="#">德利诗儿DLSER 2012 真皮时尚凉鞋</a></dd>
						<dd>价格:<span>&yen99.99</span></dd>
					</dl>
					<dl>
						<dt><a href="#"><img src="img/img7.jpg"/></a></dt>
						<dd><a href="#">德利诗儿DLSER 2012 真皮时尚凉鞋</a></dd>
						<dd>价格:<span>&yen99.99</span></dd>
					</dl>
					<dl>
						<dt><a href="#"><img src="img/img8.jpg"/></a></dt>
						<dd><a href="#">德利诗儿DLSER 2012 真皮时尚凉鞋</a></dd>
						<dd>价格:<span>&yen99.99</span></dd>
					</dl>
					<dl>
						<dt><a href="#"><img src="img/img9.jpg"/></a></dt>
						<dd><a href="#">德利诗儿DLSER 2012 真皮时尚凉鞋</a></dd>
						<dd>价格:<span>&yen99.99</span></dd>
					</dl>
				</div>
				<div >
					<dl>
						<dt><a href="#"><img src="img/img10.jpg"/></a></dt>
						<dd><a href="#">德利诗儿DLSER 2012 真皮时尚凉鞋</a></dd>
						<dd>价格:<span>&yen99.99</span></dd>
					</dl>
					<dl>
						<dt><a href="#"><img src="img/img11.jpg"/></a></dt>
						<dd><a href="#">德利诗儿DLSER 2012 真皮时尚凉鞋</a></dd>
						<dd>价格:<span>&yen99.99</span></dd>
					</dl>
					<dl>
						<dt><a href="#"><img src="img/img12.jpg"/></a></dt>
						<dd><a href="#">德利诗儿DLSER 2012 真皮时尚凉鞋</a></dd>
						<dd>价格:<span>&yen99.99</span></dd>
					</dl>
					<dl>
						<dt><a href="#"><img src="img/img13.jpg"/></a></dt>
						<dd><a href="#">德利诗儿DLSER 2012 真皮时尚凉鞋</a></dd>
						<dd>价格:<span>&yen99.99</span></dd>
					</dl>
					<dl>
						<dt><a href="#"><img src="img/img14.jpg"/></a></dt>
						<dd><a href="#">德利诗儿DLSER 2012 真皮时尚凉鞋</a></dd>
						<dd>价格:<span>&yen99.99</span></dd>
					</dl>
				</div>
				<div >
					<dl>
						<dt><a href="#"><img src="img/img15.jpg"/></a></dt>
						<dd><a href="#">德利诗儿DLSER 2012 真皮时尚凉鞋</a></dd>
						<dd>价格:<span>&yen99.99</span></dd>
					</dl>
					<dl>
						<dt><a href="#"><img src="img/img16.jpg"/></a></dt>
						<dd><a href="#">德利诗儿DLSER 2012 真皮时尚凉鞋</a></dd>
						<dd>价格:<span>&yen99.99</span></dd>
					</dl>
					<dl>
						<dt><a href="#"><img src="img/img17.jpg"/></a></dt>
						<dd><a href="#">德利诗儿DLSER 2012 真皮时尚凉鞋</a></dd>
						<dd>价格:<span>&yen99.99</span></dd>
					</dl>
					<dl>
						<dt><a href="#"><img src="img/img18.jpg"/></a></dt>
						<dd><a href="#">德利诗儿DLSER 2012 真皮时尚凉鞋</a></dd>
						<dd>价格:<span>&yen99.99</span></dd>
					</dl>
					<dl>
						<dt><a href="#"><img src="img/img19.jpg"/></a></dt>
						<dd><a href="#">德利诗儿DLSER 2012 真皮时尚凉鞋</a></dd>
						<dd>价格:<span>&yen99.99</span></dd>
					</dl>
				</div>
				<div >
					<dl>
						<dt><a href="#"><img src="img/img20.jpg"/></a></dt>
						<dd><a href="#">德利诗儿DLSER 2012 真皮时尚凉鞋</a></dd>
						<dd>价格:<span>&yen99.99</span></dd>
					</dl>
					<dl>
						<dt><a href="#"><img src="img/img21.jpg"/></a></dt>
						<dd><a href="#">德利诗儿DLSER 2012 真皮时尚凉鞋</a></dd>
						<dd>价格:<span>&yen99.99</span></dd>
					</dl>
					<dl>
						<dt><a href="#"><img src="img/img22.jpg"/></a></dt>
						<dd><a href="#">德利诗儿DLSER 2012 真皮时尚凉鞋</a></dd>
						<dd>价格:<span>&yen99.99</span></dd>
					</dl>
					<dl>
						<dt><a href="#"><img src="img/img23.jpg"/></a></dt>
						<dd><a href="#">德利诗儿DLSER 2012 真皮时尚凉鞋</a></dd>
						<dd>价格:<span>&yen99.99</span></dd>
					</dl>
					<dl>
						<dt><a href="#"><img src="img/img24.jpg"/></a></dt>
						<dd><a href="#">德利诗儿DLSER 2012 真皮时尚凉鞋</a></dd>
						<dd>价格:<span>&yen99.99</span></dd>
					</dl>
				</div>
			</div>
		</div>
		<script type="text/javascript">
			var shang = document.getElementById('shang');
			var arrLi = box.getElementsByTagName('li');
			arrLi[0].className = 'curr';
			
			var xia = document.getElementById('xia');
			arrCount = xia.getElementsByTagName('div');
			arrCount[0].className = 'curr';
			
			
			for (var i = 0; i < arrLi.length; i++) {
				arrLi[i].index = i
				arrLi[i].onmouseenter = function(){
					for (var j = 0; j < arrLi.length; j++) {
						arrLi[j].className = '';
						arrCount[j].className = '';
					}
					this.className = 'curr';
					arrCount[this.index].className = 'curr';
				}
				arrLi[i].onmouseleave = function(){
					for (var i = 0; i < arrLi.length; i++) {
						this.className = '';
						arrCount[this.index].className = '';
					}	
					arrLi[0].className = 'curr';
					arrCount[0].className = 'curr';
				}
				
			}
			
		</script>
	</body>
</html>

						